<template>
    <div id="app">
        <div class="fixed-header">
            <biyao-search :onCategoryClick="openCategory"></biyao-search>
            <tmall-fast-nav :buttons="buttons"></tmall-fast-nav>
            <biyao-category :list="category"></biyao-category>
        </div>
        <div class="mui-content">
            <tmall-mui-slider :slides="slides"></tmall-mui-slider>
            <biyao-recommend v-for="(recommend,index) in recommends" :recommend="recommend" :key="index"></biyao-recommend>
        </div>
        <category-panel :menu="category" :show="categoryshow" @changeCategoryShow="categoryshow = false"></category-panel>
    </div>
</template>
<script>
    import _ from 'lodash';
    import { ajax } from 'assets/js/Lib';
    import BiyaoSearch from 'components/BiyaoSearch';
    import BiyaoCategory from 'components/BiyaoCategory';
    import BiyaoRecommend from 'components/BiyaoRecommend';
    import TmallFastNav from 'components/TmallFastNav';
    import TmallMuiSlider from 'components/TmallMuiSlider';
    import CategoryPanel from 'components/CategoryPanel';

    export default {
        data() {
            return {
                buttons: [],
                slides: [],
                category: [],
                recommends: [],
                categoryshow: false,
            };
        },
        components: {
            TmallMuiSlider, TmallFastNav, BiyaoCategory, BiyaoSearch, BiyaoRecommend, CategoryPanel
        },
        beforeCreate() {},
        beforeMount() {},
        mounted() {
            ajax({
                url: '/api/menu/index',
                type: 'GET',
                data: { is_score: 1 },
                success: res => {
                    this.category = res
                    localStorage.setItem('$scoreMenu', JSON.stringify(res))
                }
            });
            ajax({
                url: '/api/index/slgads',
                type: 'GET',
                success: data => {
                    this.slides = data.slide.reverse()
                    let icons = data.fastIcon.reverse()
                    icons[0].name = '乐放商城'
                    icons[0].url = '/views/slghome.html'
                    this.buttons = icons
                    localStorage.setItem('$scoreButtons', JSON.stringify(this.buttons))
                }
            });
            ajax({
                url: '/api/product/index',
                type: 'GET',
                data: { is_score: 1, full_score_buy: 1 },
                success: res => {
                    this.recommends.push({
                        header: '全积分消费区',
                        banner: 'https://bfs.biyao.com/group1/M00/11/65/rBACYVkmQe-ATsu4AAEIj7gf8Kg853.jpg',
                        products: _.take( res.product, 6 )
                    });
                }
            });
            ajax({
                url: '/api/product/index',
                type: 'GET',
                 data: { is_score: 1, full_score_buy: 0 },
                success: res => {
                    this.recommends.push({
                        header: '现金 + 积分消费区',
                        banner: 'https://bfs.biyao.com/group1/M00/11/65/rBACYVkmQe-ATsu4AAEIj7gf8Kg853.jpg',
                        products: _.take( res.product, 6 )
                    });
                }
            });
        },
        methods: {
            openCategory: function () {
                this.categoryshow = true
            },
        }
    };
</script>
<style lang="less">
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;
        background: #fff;
        box-shadow: 1px 1px 5px rgba(7,0,2,.2);
    }
    .fast-nav {
        padding-bottom: .3rem;
        border-bottom: 1px solid rgba(7, 0, 2, 0.1);
    }
    .mui-content {
        padding-top: 4.9rem;
    }
    .mui-fullscreen {
        position: fixed !important;
    }
</style>
